import React, { Component } from 'react'
import './index.less'
import { Card, Icon } from 'antd';
import Animate from 'rc-animate';

export default class CollapseCard extends Component {

  state ={
    isShow: true,
    height: '',
    padding: ''
  }

  collapseClick = () => {
    this.setState({
      isShow: !this.state.isShow
    })
    let node = this.refs.collapseCard.container.childNodes[1];
    if (!this.state.isShow) {
      node.style.display = "block"
    } else {
      setTimeout(() => {
        node.style.display = "none";
      }, 300);
    }
  }

  render() {
    const collapse = (
      <div className="collapse">
        <a className={!this.state.isShow ? 'react-show' : ''}>收起</a>
        <a className={this.state.isShow ? 'react-show' : ''}>展开</a>
        <Icon type="down" className={this.state.isShow ? 'react-show' : ''}/>
        <Icon type="up" className={!this.state.isShow ? 'react-show' : ''}/>
      </div>
    );
    return (
      <Card title={this.props.titleName} extra={collapse} ref="collapseCard" className="card" onClick={this.collapseClick}>
        <Animate
          transitionName="fade"
          transitionAppear
          duration={500}
        >
          {this.state.isShow ? this.props.children : null}
        </Animate>
      </Card>
    )
  }
}
